<template>
    <div class="videoMenu common-layout">
        <div class="videoMenu-title">
            <b :title="p.courseGroup.name"> {{ p.courseGroup.name }} </b>
        </div>
        <el-scrollbar>
            <el-menu :default-active="activeIndex" ref="menu" class="videoMenu-content">
                <template v-for="(course, k) in courseList" :key="k">
                    <el-sub-menu :index="`${k}`" v-if="(course.lession || []).length > 1" class="videoMenu-subMenu">
                        <template #title>
                            <b :title="course.name" class="lession-name">{{ course.name }}</b>
                        </template>
                        <el-menu-item ref="menuItems" :index="`${k}-${i}`" v-for="(lession, i) in course.lession || []"
                            :key="i">
                            <div class="videoMenu-item" @click="clickMenuItem(course, i)">
                                <span :title="lession.lessionName ? lession.lessionName : course.name"
                                    class="lession-name">
                                    {{ lession.lessionName ? lession.lessionName : course.name }}
                                </span>
                                <span class="videoMenu-item-icon">
                                    <el-icon>
                                        <el-icon>
                                            <CaretRight />
                                        </el-icon>
                                    </el-icon>
                                </span>
                            </div>
                        </el-menu-item>
                    </el-sub-menu>
                    <!-- 排除掉没课的 course.lession = [] -->
                    <el-menu-item :index="`${k}`" v-if="(course.lession || []).length === 1">
                        <div class="videoMenu-item" @click="clickMenuItem(course, 0)">
                            <span :title="course.name" class="lession-name">
                                {{ course.name }}
                            </span>
                            <span class="videoMenu-item-icon">
                                <el-icon>
                                    <el-icon>
                                        <CaretRight />
                                    </el-icon>
                                </el-icon>
                            </span>
                        </div>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script setup lang='ts'>
import { computed, nextTick, onMounted, ref } from 'vue';
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Alymodel from '../../../mysql_interface/model';

const p = defineProps<{
    myCourseIDs: number[],
    courseGroup: Alymodel.CourseGroup,
    courseList: Alymodel.IMcourse[],
    course: Alymodel.IMcourse,
    // files: Alymodel.Ifileurl[],
    // teacherFiles: Alymodel.Iteachercoursefile[],
}>()
// 过滤掉没权限的课程菜单
const courseList = computed(() => {
    return p.courseList
    // return p.courseList.filter(c => {
    //     return p.myCourseIDs.includes(c.ID)
    // })
})
const activeIndex = computed(() => {
    let idx = '0'
    const ID = p.course.ID
    const lession = route.query.lession
    courseList.value.forEach((c, ci) => {
        if (c.ID == Number(ID)) {
            idx = `${ci}`
            if ((c.lession || []).length > 1) {
                idx = `${ci}-${lession}`
            }
        }
    })
    return idx
})

const store = useStore(Storekey)
const route = useRoute()
const router = useRouter()
// 当前登录用户
const user = computed(() => {
    return store.state.user;
});
const teamId = computed(() => {
    return Number(user.value?.teamid);
});

// 
const menu = ref(null);
// watch(activeIndex, () => {
//     scrollToActiveItem();
// });
const scrollToActiveItem = () => {
    nextTick(() => {
        const activeItem = menu.value?.$el.querySelector('.el-menu-item.is-active');
        if (activeItem) {
            activeItem.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
        }
    });
};
onMounted(async () => {
    console.log("videoMenu props=>", p)
    // await start()
    setTimeout(() => {
        scrollToActiveItem();
    }, 1000); // 调整等待的时间
})
const loading = ref(true)
async function start() {
    loading.value = true;

    loading.value = false;
}

function clickMenuItem(course: Alymodel.IMcourse, lessionKey: number) {
    let { query } = route
    router.push({
        name: '观看课程',
        params: { ID: course.ID, },
        query: { ...query, catebag: p.courseGroup.ID, ID: course.ID, lession: lessionKey, }
    });
}

</script>

<style scoped>
.videoMenu {
    --videoMenu-title-height: 60px;
    --videoMenu-title-margin-bottom: 4px;
}

.videoMenu-title {
    height: var(--videoMenu-title-height);
    line-height: var(--videoMenu-title-height);
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    border-bottom: 1px solid #dcdfe6;
    box-shadow: var(--container-box-shadow);
    margin-bottom: var(--videoMenu-title-margin-bottom);
    padding: 0 var(--container-margin);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.videoMenu-content {
    height: calc(100vh - 64px - 2 * var(--container-margin) - var(--videoMenu-title-height) - var(--videoMenu-title-margin-bottom));
}

.videoMenu-subMenu {
    line-height: 60px;
    width: auto;
    color: rgb(255, 255, 255);
}

.videoMenu-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lession-name {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.videoMenu-item-icon {
    padding-left: 10px;
    /* 固定图标宽度，根据需要调整 */
    /* width: 30px;
    flex-shrink: 0;
    display: flex;
    justify-content: center; */
}
</style>

<style>
/* .el-sub-menu__title:hover {
    background-color: var(--el-color-primary-light-9) !important;
} */
.videoMenu .el-menu {
    border-right: none;
}

.videoMenu .el-menu .el-menu-item.is-active {
    background-color: var(--background-color) !important;
    color: var(--sass-color-blue);
}
</style>